<template></template>
<script></script>
<style scoped>
    /*PhotoList下的图片*/
    /*下面的图片*/
   .photo-list li {
      margin: -18px 0px 0px -40px;
      list-style: none;
      position: relative;
    }
    .photo-list li img {
      /*margin: 0px 0px 0px -20px;*/
      width: 100%;
      height: 100%;
      vertical-align: top;
      position: relative;
    }
    .photo-list ul {
      padding: absolute;
      bottom: 0px;
      color: white;
      background-color: rgba(0,0,0,0.3);
      margin-bottom: 0px;
    }
    /*遮罩层*/
    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 22%;
      background: rgba(101,101,101,0.3);
      color: #fff;
      opacity: 0;  /*鼠标不在图片上时，遮罩层不显示*/
    }
    /*鼠标移入显示遮罩层*/
    .photo-list .mask:hover {
      display: block;
      opacity: 1;
    }
    .photo-list a div {
      padding: 15px 0px 0px 15px;
    }
    .photo-list div span:nth-child(1) {
      font-weight: bold;
      font-size: 16px;
    }
    
    /*图片懒加载样式*/
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>